feat(badges): hide category button

1 files changed, 62 insertions, 2 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 0490dc97..48a10a0c 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -53,6 +53,7 @@
 	let importReplies = false;
 	let badger: Partial<User>;
 	let migrateMode = false;
+	let hideMode = false;
 	let preferences: UserPreferences;
 
 	$: categoryFilter = new URLSearchParams($page.url.searchParams).get('category');
@@ -429,6 +430,19 @@
 		migrateMode = false;
 	};
 
+	const hideCategory = () => {
+		badgesPromise = fetch(
+			`/api/badges?hide=true&category=${encodeURIComponent(
+				(document.querySelector('#category_hide') as HTMLInputElement).value
+			)}`,
+			{
+				method: 'PUT'
+			}
+		);
+
+		hideMode = false;
+	};
+
 	// const exportBadges = (groupedBadges: [string, Badge[]][]) => {
 	// 	const url = URL.createObjectURL(
 	// 		new Blob([JSON.stringify(groupedBadges)], { type: 'application/json' })
@@ -560,8 +574,18 @@
 									>
 										Migrate Category
 									</button>
-									<!-- <span style="margin: 0 0.625rem;">•</span>
-									<button on:click={() => exportBadges(groupedBadges)}>Export Badges</button> -->
+									<span style="margin: 0 0.625rem;">•</span>
+									<button
+										on:click={() => {
+											if (hideMode) selectedBadge = undefined;
+
+											hideMode = !hideMode;
+										}}
+									>
+										Hide Category
+									</button>
+									<!-- <!-- <span style="margin: 0 0.625rem;">•</span> -->
+									<!-- <button on:click={() => exportBadges(groupedBadges)}>Export Badges</button> -->
 
 									{#if editMode && isOwner}
 										{@const groups = groupedBadges
@@ -908,6 +932,42 @@
 	</button>
 </Popup>
 
+<Popup fullscreen onLeave={() => (hideMode = false)} show={hideMode}>
+	Hide Category
+
+	<SettingHint lineBreak>
+		If the majority of the badges in a category are shown, the category will be hidden, and vice
+		versa.
+	</SettingHint>
+
+	<p />
+
+	<input
+		type="text"
+		placeholder="Category"
+		id="category_hide"
+		minlength="1"
+		maxlength="1000"
+		size="20"
+	/>
+	<SettingHint lineBreak>Leave category field empty to hide all.</SettingHint>
+
+	<p />
+
+	<button
+		on:click={() => {
+			hideMode = false;
+			importImages = undefined;
+		}}
+		class="button-lined"
+	>
+		{$locale().user.badges.importMode.cancel}
+	</button>
+	<button on:click={() => hideCategory()} class="button-lined" style="float: right;"
+		>Toggle Visibility</button
+	>
+</Popup>
+
 <style>
 	/* body {
 		margin: 0;